/*
 * @Description  : 工作台页面
 * @Author       : Keyman
 * @Date         : 2025-11-15 16:47:37
 * @LastEditors  : Keyman
 * @LastEditTime : 2025-11-23 00:33:32
 */

import {
  DollarOutlined,
  LaptopOutlined,
  RadarChartOutlined,
  SnippetsOutlined,
} from "@ant-design/icons";
import { Col, Card, Progress, Row, Statistic, Tag, Timeline } from "antd";
import "./index.scss";
import ReactECharts, { type EChartsReactProps } from "echarts-for-react";
import { getEnergyData } from "../../api/databoard";
import { useEffect, useState } from "react";

const initOption: EChartsReactProps["option"] = {
  title: {
    text: "当日能源消耗",
  },
  tooltip: {
    trigger: "axis",
  },
  legend: {
    data: [],
  },
  grid: {
    left: "1%",
    right: "1%",
    bottom: "15%",
    height: "auto",
    width: "auto",
    containLabel: true,
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    data: ["0:00", "4:00", "8:00", "12:00", "16:00", "20:00", "24:00"],
  },
  yAxis: {
    type: "value",
  },
  series: [],
};

const initOption2: EChartsReactProps["option"] = {
  title: {
    text: "企业资质情况（家）",
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "cross",
    },
  },
  legend: {},
  grid: {
    left: "1%",
    right: "1%",
    bottom: "15%",
    containLabel: true,
  },
  xAxis: {
    type: "category",
    data: ["2014", "2016", "2018", "2020", "2022", "2024"],
    boundaryGap: [0, 0.1],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      name: "科技企业",
      type: "bar",
      data: [40, 220, 378, 658, 1122, 1200],
    },
    {
      name: "高新企业",
      type: "bar",
      data: [20, 39, 443, 490, 559, 762],
    },
    {
      name: "国营企业",
      type: "bar",
      data: [78, 167, 229, 330, 380, 420],
    },
  ],
};

const initOption3: EChartsReactProps["option"] = {
  legend: {
    top: "top",
  },
  series: [
    {
      name: "Nightingale Chart",
      type: "pie",
      radius: [30, 100],
      center: ["50%", "50%"],
      roseType: "area",
      itemStyle: {
        borderRadius: 8,
      },
      data: [
        { value: 40, name: "在营" },
        { value: 38, name: "已租" },
        { value: 32, name: "出租" },
        { value: 30, name: "续签" },
        { value: 28, name: "新签" },
        { value: 26, name: "待租" },
        { value: 22, name: "退租" },
      ],
    },
  ],
};

async function getData() {
  const { data } = await getEnergyData();
  const tmpList = data.map((item: { name: string; data: number[] }) => {
    return {
      name: item.name,
      type: "line",
      data: item.data,
      stack: "Total",
    };
  });

  return tmpList;
}

function Dashboard() {
  const [data, setData] = useState(initOption);
  useEffect(() => {
    getData().then((res) => {
      setData({
        ...data,
        series: res,
        legend: {
          data: res.map((item: { name: string }) => item.name),
        },
      });
    });
  }, []);
  return (
    <>
      <div className="dashboard">
        <Row gutter={16}>
          <Col span={6}>
            <Card className="clearfix">
              <div className="card-content fl">
                <div>13479</div>
                <p>园区总面积(平方米)</p>
              </div>
              <div className="fr">
                <RadarChartOutlined className="icon" />
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card className="clearfix">
              <div className="card-content fl">
                <div>8635</div>
                <p>总租赁面积(平方米)</p>
              </div>
              <div className="fr">
                <SnippetsOutlined
                  className="icon"
                  style={{ color: "#81c452" }}
                />
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card className="clearfix">
              <div className="card-content fl">
                <div> 38764</div>
                <p>园区总产值(万元)</p>
              </div>
              <div className="fr">
                <DollarOutlined className="icon" style={{ color: "#62c9cb" }} />
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card className="clearfix">
              <div className="card-content fl">
                <div>2874</div>
                <p>入驻企业总数(家)</p>
              </div>
              <div className="fr">
                <LaptopOutlined className="icon" style={{ color: "#e49362" }} />
              </div>
            </Card>
          </Col>
        </Row>
        <Row gutter={16} className="mt">
          <Col span={12}>
            <Card title="能源消耗情况">
              <ReactECharts
                option={data}
                opts={{ renderer: "svg" }}
              ></ReactECharts>
            </Card>
          </Col>
          <Col span={12}>
            <Card title="企业资质情况">
              <ReactECharts option={initOption2}></ReactECharts>
            </Card>
          </Col>
        </Row>
        <Row gutter={16} className="mt">
          <Col span={12}>
            <Card title="租赁情况">
              <ReactECharts option={initOption3}></ReactECharts>
            </Card>
          </Col>
          <Col span={6}>
            <Card title="充电桩空闲统计">
              <div className="warp">
                <Progress type="circle" percent={75} />
                <Statistic
                  title="总充电桩数"
                  value={75}
                  suffix="/ 100"
                  className="mt"
                />
              </div>
            </Card>
          </Col>
          <Col span={6}>
            <Card title="实时车辆信息" style={{ height: "406px" }}>
              <Timeline
                items={[
                  {
                    children: (
                      <>
                        <Tag color="green">进场</Tag>08:24车辆 京A66666
                      </>
                    ),
                  },
                  {
                    children: (
                      <>
                        <Tag color="red">出场</Tag>09:15 车辆 京A66666{" "}
                      </>
                    ),
                    color: "red",
                  },
                  {
                    children: (
                      <>
                        <Tag color="green">进场</Tag>09:22 车辆 京A23456{" "}
                      </>
                    ),
                  },
                  {
                    children: (
                      <>
                        <Tag color="red">出场</Tag>10:43 车辆 京A18763{" "}
                      </>
                    ),
                    color: "red",
                  },
                  {
                    children: (
                      <>
                        <Tag color="green">进场</Tag>13:38 车辆 京A88888{" "}
                      </>
                    ),
                  },
                  {
                    children: (
                      <>
                        <Tag color="green">进场</Tag>14:46 车辆 京A23456{" "}
                      </>
                    ),
                  },
                ]}
              />
            </Card>
          </Col>
        </Row>
      </div>
    </>
  );
}

export default Dashboard;
